<template>
  <view class="beansBuyContainer">
    <image style="height: 187upx;" src="https://www.teasoo.com/img/Hse2rEOCkUo2fBuUKtSDCxPHomE7FCuhgW6PoW4tGkADzBfYtvL07g==_0x0_95.jpg" mode=""></image>
    <view class="beansBuyMain">
      <!-- 标题 -->
      <view class="beansBuyTitle">
        <image class="beansBuyImg" src="../../static/images/date.png" mode=""></image>
        <text class="beansBuyText">活动进行中</text>
      </view> 
      
      <!-- 商品列表 -->
      <view class="beansBugItem" v-for="(e,index) in eventData" :key="e.id">
        <image class="itemImg" :src="e.cover" mode=""></image>
        <view class="itemTitle">{{e.name}}</view>
        <view class="itemMain">
          <view class="itemPrice">{{e.token}}豆</view>
          <view class="itemStock">库存{{e.storage}}件</view>
          <view class="itemBuy">T豆购买</view>
        </view>
      </view>
      <view class="beansBugItem">
        <image class="itemImg" src="https://www.teasoo.com/img/SCDbphqcKvJ9p7$rRdfZcM$jHo0IGM8bbrXVgoVui4l$7QnH_480x480_95.jpg" mode=""></image>
        <view class="itemTitle">T豆购|大红袍 6200工之极 250g/盒，25盒</view>
        <view class="itemMain">
          <view class="itemPrice">4999豆</view>
          <view class="itemStock">库存99件</view>
          <view class="itemBuy">T豆购买</view>
        </view>
      </view>
      <view class="beansBugItem">
        <image class="itemImg" src="https://www.teasoo.com/img/SCDbphqcKvJ9p7$rRdfZcM$jHo0IGM8bbrXVgoVui4l$7QnH_480x480_95.jpg" mode=""></image>
        <view class="itemTitle">T豆购|大红袍 6200工之极 250g/盒，25盒</view>
        <view class="itemMain">
          <view class="itemPrice">4999豆</view>
          <view class="itemStock">库存99件</view>
          <view class="itemBuy">T豆购买</view>
        </view>
      </view>
    </view>
    
    <view class="footer">
      <view class="line"></view>
      <view class="footerText">无更多商品</view>
      <view class="line"></view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
  export default {
    data() {
      return {
        
      };
    },
    mounted(){
      this.getEventData()
    },
    methods:{
      getEventData(){
        this.$store.dispatch('home/getEventData')
      }
    },
    computed:{
      ...mapState('home',['eventData'])
    }
  }
</script>

<style lang="stylus" scoped>
.beansBuyContainer
  height: 100%
  background-color: #ddd
  .beansBuyMain
    width: 100%
    height: 100%
    .beansBuyTitle
      width: 100%
      height: 100upx
      text-align: center
      line-height: 100upx
      .beansBuyImg
        width: 28upx
        height: 28upx
        margin-right: 10upx
      .beansBuyText
        font-size: 30upx
    .beansBugItem
      width: 702upx
      height: 248upx
      background-color: #fff
      position: relative
      margin-left: 20upx
      margin-bottom: 10upx
      .itemImg
        position: absolute
        top: 0
        left: 20upx
        display: block
        width: 200upx
        height: 200upx
      .itemTitle
        font-size: 32upx
        padding-left: 240upx
        padding-top: 30upx
      .itemMain
        position: absolute
        top: 100upx
        left: 240upx
        padding-top: 20upx
        .itemPrice
          font-size: 32upx
          color: red
        .itemStock
          font-size: 24upx
          padding-top: 8upx
        .itemBuy
          font-size: 28upx
          width: 140upx
          height: 50upx
          background-color: #fb5f39
          border-radius: 20upx
          text-align: center
          line-height: 50upx
          position: absolute
          left: 270upx
          top: 40upx
          color: #fff
  .footer
    width: 100%
    height: 100upx
    display: flex
    margin-left: 100upx
    .line
      width: 100upx
      height: 1px;
      background-color: #ccc;
      margin:50upx
    .footerText
      font-size: 32upx
      color: #999
      margin-top: 30upx
</style>
